<template>
  <div class="page-alert-detail">
    <!-- 面包屑 -->
    <Breadcrumb separator=">">
      <BreadcrumbItem to="/home/alert">告警管理</BreadcrumbItem>
      <BreadcrumbItem>{{$route.params.alertId}}</BreadcrumbItem>
    </Breadcrumb>

    <h4 class="zl-title">告警服务详情</h4>
    <div class="zl-page-loading" v-if="isLoading">
      <Spin fix></Spin>
    </div>
    <div class="panel panel-detail" v-else>
      <Form :label-width="80" label-position="left">
        <FormItem label="任务名称:">{{alertDetail.jobName}}</FormItem>
        <FormItem label="收 信 人:">
          <p v-for="receiver in alertDetail.receivers">{{receiver}}</p>
        </FormItem>
        <FormItem label="创建时间:">{{alertDetail.createTime}}</FormItem>
        <FormItem label="描述:">{{alertDetail.messageDescription || '暂无'}}</FormItem>
      </Form>
    </div>

    <h4 class="zl-title">告警规则</h4>
    <div class="zl-page-loading" v-if="isLoading">
      <Spin fix></Spin>
    </div>
    <Table :columns="columns" :data="alertList" v-else></Table>

  </div>
</template>
<script type="text/javascript">
import Fetch from '@/api/request'
export default {
  data() {
    return {
      isLoading: true,
      FREQUENCYS: [{
        label: '1分钟',
        value: '1m'
      }, {
        label: '5分钟',
        value: '5m'
      }, {
        label: '15分钟',
        value: '15m'
      }, {
        label: '30分钟',
        value: '30m'
      }, {
        label: '1小时',
        value: '1h'
      }, {
        label: '6小时',
        value: '6h'
      }, {
        label: '12小时',
        value: '12h'
      }],
      AGGREGATIONES: [{
        label: '平均值',
        value: 'AVG'
      }, {
        label: '最小值',
        value: 'MIN'
      }, {
        label: '最大值',
        value: 'MAX'
      }, {
        label: '求和',
        value: 'SUM'
      }, {
        label: '总数',
        value: 'COUNT'
      }, {
        label: '变化量',
        value: 'STATS'
      }, {
        label: '平均速率',
        value: 'AVGSPEED'
      }],
      ALARM_RULE: [{
        label: '大于',
        value: 'GT'
      }, {
        label: '大于等于',
        value: 'GTE'
      }, {
        label: '小于',
        value: 'LT'
      }, {
        label: '小于等于',
        value: 'LTE'
      }, {
        label: '等于',
        value: 'EQ'
      }, {
        label: '区间',
        value: 'BETWEEN'
      }, {
        label: '空值',
        value: 'NULL'
      }],
      ALERT_LEVEL: [{
        label: '危险',
        value: 'danger'
      }, {
        label: '警告',
        value: 'warning'
      }, {
        label: '普通',
        value: 'ordinary'
      }],
      alertDetail: {},
      alertList: [],
      columns: [{
        type: 'index',
        width: 50
      }, {
        title: '模块',
        key: 'ruleMetaDesc'
      }, {
        title: '告警等级',
        width: 80,
        render: (h, params) => {
          let alertLabel = '-'
          for (let i = 0; i < this.ALERT_LEVEL.length; i++) {
            const alert = this.ALERT_LEVEL[i]
            if (alert.value === params.row.alarmLevel) {
              alertLabel = alert.label
            }
          }
          return h('span', alertLabel)
        }
      }, {
        title: '查询频率',
        width: 80,
        render: (h, params) => {
          let fqLabel = '-'
          for (let i = 0; i < this.FREQUENCYS.length; i++) {
            const fq = this.FREQUENCYS[i]
            if (fq.value === params.row.queryFrequence) {
              fqLabel = fq.label
            }
          }
          return h('span', fqLabel)
        }
      }, {
        title: '聚合方式',
        width: 80,
        render: (h, params) => {
          let aggLabel = '-'
          for (let i = 0; i < this.AGGREGATIONES.length; i++) {
            const agg = this.AGGREGATIONES[i]
            if (agg.value === params.row.aggMethod) {
              aggLabel = agg.label
            }
          }
          return h('span', aggLabel)
        }
      }, {
        title: '告警规则',
        width: 80,
        render: (h, params) => {
          let alarmLabel = '-'
          for (let i = 0; i < this.ALARM_RULE.length; i++) {
            const rule = this.ALARM_RULE[i]
            if (rule.value === params.row.ruleEnum) {
              alarmLabel = rule.label
            }
          }
          return h('span', alarmLabel)
        }
      }, {
        title: '阈值',
        width: 80,
        render: (h, params) => {
          let ret = ''
          if (params.row.thresholds) {
            for (let i = 0; i < params.row.thresholds.length; i++) {
              const t = params.row.thresholds[i]
              if (i === 0) {
                ret += t
              } else {
                ret += '-' + t
              }
            }
            ret += params.row.unit
          }
          return h('span', ret)
        }
      }, {
        title: '描述',
        key: 'messageDescription'
      }, {
        title: '选项',
        width: 400,
        render: (h, params) => {
          let options = []
          for (const key in params.row.options) {
            if (params.row.options.hasOwnProperty(key)) {
              const option = params.row.options[key]
              if (typeof option === 'string') {
                options.push(h('div', {
                  class: 'alert-option'
                }, key + ':' + option))
              } else if (Array.isArray(option)) {
                options.push(h('div', {
                  class: 'alert-option'
                }, key + ':' + JSON.stringify(option)))
              }
            }
          }
          return h('div', options)
        }
      }]
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      Fetch.get({
        url: '/api/scheduler-job/alert/' + this.$route.params.alertId
      }).then((res) => {
        if (res && res.code === '0') {
          this.alertDetail = res.data
          this.alertList = res.data.alertJobInfoVOS
        } else {
          this.$Message.warning({
            content: res.message,
            duration: this.DURATION
          })
        }
        this.isLoading = false
      }).catch((err) => {
        this.isLoading = false
        this.$Message.error(err.message)
      })
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.panel-detail {
  padding-left: 30px;
}
</style>
